jQuery(function(){ // on page DOM load
	
    $('#tableFilter').click(function(){
      $(this).removeClass('moreLeft');
      $('#tableForm').removeClass('openForm');
      $('#sidebarRight').addClass('barHide');
      $('.tableData').removeClass('moreLeft');
    });

    $('#colorToggle').click(function(){
      $(this).toggleClass('active');
      $('#schemeModal').toggleClass('hide');
    });

    $('#chartToggle').click(function(){
      $('#chartModal').removeClass('hide');
    });

    $('#chartClose').click(function(){
      $('#chartModal').addClass('hide');
    });

    $('#schemeModal').click(function(){
      $(this).addClass('hide');
      $('#colorToggle').removeClass('active');
    });

    $('.formToggle').click(function(){
      $('#tableForm').addClass('openForm');
      $('.blocker').removeClass('hide');
      $('#tableFilter').removeClass('moreLeft');
      $('#tableFilter').removeClass('filterOpen');
      $('table tbody tr').removeClass('clicked');
    });

    $('.formClose').click(function(){
      $('#tableForm').removeClass('openForm');
      $('.blocker').addClass('hide');
      $('table tbody tr').removeClass('active');
    });

    $('.tableData').click(function(){
      $('#tableFilter').removeClass('moreLeft');
      $(this).removeClass('moreLeft');
      $('#sidebarRight').addClass('barHide');
    });

    $('#sidebarRight').click(function(){
      $(this).toggleClass('barHide');
      $('#tableFilter').removeClass('filterOpen');
      $('#tableFilter').toggleClass('moreLeft');
      $('.tableData').toggleClass('moreLeft');
      $('#tableForm').removeClass('openForm');
    });

    $('table tbody tr').click(function(){
      $('table tbody tr').removeClass('active');
      $(this).toggleClass('clicked');
      $(this).addClass('active');
    });

    $('.clicked').click(function(){
      $(this).removeClass('clicked');
      $(this).removeClass('active');
    });

    $('#tableFilter .elipsis').click(function(){
      $('#tableFilter').toggleClass('filterOpen');
    });

    $('#debit').click(function(){
      $('#amount').toggleClass('red');
      $('.negative').addClass('show');
      $('.positive').removeClass('show');
    });

    $('#credit').click(function(){
      $('#amount').removeClass('red');
      $('.positive').addClass('show');
      $('.negative').removeClass('show');
    });

    $(document).ready(function () {
      var s1 = [[2002, 112000], [2003, 122000], [2004, 104000], [2005, 99000], [2006, 121000], 
      [2007, 148000], [2008, 114000], [2009, 133000], [2010, 161000], [2011, 173000]];
      var s2 = [[2002, 10200], [2003, 10800], [2004, 11200], [2005, 11800], [2006, 12400], 
      [2007, 12800], [2008, 13200], [2009, 12600], [2010, 13100]];
   
      plot1 = $.jqplot("chart1", [s2, s1], {
          // Turns on animatino for all series in this plot.
          animate: true,
          // Will animate plot on calls to plot1.replot({resetAxes:true})
          animateReplot: true,
          cursor: {
              show: true,
              zoom: true,
              looseZoom: true,
              showTooltip: false
          },
          series:[
              {
                  pointLabels: {
                      show: true
                  },
                  renderer: $.jqplot.BarRenderer,
                  showHighlight: false,
                  yaxis: 'y2axis',
                  rendererOptions: {
                      // Speed up the animation a little bit.
                      // This is a number of milliseconds.  
                      // Default for bar series is 3000.  
                      animation: {
                          speed: 2500
                      },
                      barWidth: 15,
                      barPadding: -15,
                      barMargin: 0,
                      highlightMouseOver: false
                  }
              }, 
              {
                  rendererOptions: {
                      // speed up the animation a little bit.
                      // This is a number of milliseconds.
                      // Default for a line series is 2500.
                      animation: {
                          speed: 2000
                      }
                  }
              }
          ],
          axesDefaults: {
              pad: 0
          },
          axes: {
              // These options will set up the x axis like a category axis.
              xaxis: {
                  tickInterval: 1,
                  drawMajorGridlines: false,
                  drawMinorGridlines: true,
                  drawMajorTickMarks: false,
                  rendererOptions: {
                  tickInset: 0.5,
                  minorTicks: 1
              }
              },
              yaxis: {
                  tickOptions: {
                      formatString: "$%'d"
                  },
                  rendererOptions: {
                      forceTickAt0: true
                  }
              },
              y2axis: {
                  tickOptions: {
                      formatString: "$%'d"
                  },
                  rendererOptions: {
                      // align the ticks on the y2 axis with the y axis.
                      alignTicks: true,
                      forceTickAt0: true
                  }
              }
          },
          highlighter: {
              show: true, 
              showLabel: true, 
              tooltipAxes: 'y',
              sizeAdjust: 7.5 , tooltipLocation : 'ne'
          }
      });
    });
})
